<template>
  <div class="detail">
    <section class="detail-back" @click="back">
      <van-icon name="arrow-left" />
    </section>
    <div class="container">
      <div class="detail-swiper">
        <swiper :aaa="swiperArry" height="7rem"></swiper>
      </div>
      <div class="detail-title">
        <p>{{ title.name }}</p>
        <p>{{ title.characteristic }}</p>
        <p>{{ title.minPrice }}</p>
      </div>
      <div class="detail-xxk">
        <ul ref="goodsdetail">
          <li @click="goodsxxkone">
            商品介绍
            <p v-show="lispone === 0"></p>
          </li>
          <li @click="goodsxxktwo">
            商品评价
            <p v-show="lispone === 1"></p>
          </li>
        </ul>
      </div>
      <div
        class="detail-content"
        v-if="lispone === 0"
        v-html="detailist.content"
      ></div>
      <div class="detail-content" v-else>
        <div
          class="detail-pj border-bottom"
          v-for="(item, index) in Pjlist"
          :key="index"
        >
          <div class="pj-img">
            <div>
              <img :src="item.goods.pic" alt="" />
            </div>
          </div>
          <ul class="pj-uu">
            <li>
              {{ item.user.nick }}
            </li>
            <li>
              {{ item.goods.goodReputationRemark }}
            </li>
            <li class="fonthidden">
              <span>{{ item.goods.dateReputation }}</span>
              <span>选择规格：{{ item.goods.property }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="addcart">
      <ul class="addcart-icon">
        <li class="border-right">
          <van-icon name="service-o" />
        </li>
        <li class="border-right" @click="tocart">
          <van-icon name="shopping-cart-o" :badge="$store.state.cart.length" />
        </li>
        <li class="border-right">
          <van-icon name="star-o" />
        </li>
      </ul>
      <ul class="addcart-add">
        <li>立即购买</li>
        <li class="add" @click="add">加入购物车</li>
      </ul>
    </div>
    <div class="specification" v-if="specificationShow === 1">
      <div class="specification-contont">
        <div class="specification-goods border-bottom">
          <div class="specification-img">
            <img :src="title.pic" alt="" />
          </div>
          <div class="specification-title">
            <section>{{ title.name }}</section>
            <section class="red">￥{{ title.minPrice }}</section>
          </div>
          <van-icon name="cross" />
        </div>
        <div class="specification-type border-bottom">
          <section>{{ detailist.properties[0].name }}</section>
          <section></section>
        </div>
        <div class="specification-num">
          <section>购买数量</section>
          <section class="specification-count">
            <span @click="hander(-1)">-</span>
            <span>{{ count }}</span>
            <span @click="hander(1)">+</span>
          </section>
        </div>
        <div class="specification-add" @click="addcratvuex(detailist)">
          加入购物车
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "../components/swiper/swiper";
import { getDetail, getPj } from "../utils/api";
export default {
  name: "detail",
  data() {
    return {
      detailist: {},
      title: {},
      Pjlist: [],
      lispone: 0,
      swiperArry: [],
      specificationShow: 0,
      goodsjb: "",
      count: 1,
    };
  },
  created() {
    getDetail(this.$route.query.id).then((res) => {
      this.detailist = res.data;
      this.title = res.data.basicInfo;
      console.log(res.data);
      for (let i in res.data.pics2) {
        this.swiperArry.push({ picUrl: res.data.pics2[i] });
      }
      console.log(this.swiperArry);
    }),
      getPj(this.$route.query.id).then((res) => {
        this.Pjlist = res.data;
        console.log(this.Pjlist);
      });
  },
  methods: {
    goodsxxkone() {
      this.lispone = 0;
    },
    goodsxxktwo() {
      this.lispone = 1;
    },
    back() {
      this.$router.back();
    },
    add() {
      this.specificationShow = 1;
    },
    hander(val) {
      this.count += val;
    },
    addcratvuex(obj) {
      obj.num = this.count;
      this.$store.commit("changeCart", obj);
      this.specificationShow = 0;
    },
    tocart(){
      this.$router.push('/cart')
    }
  },
  components: {
    swiper,
  },
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .detail-back {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    border: 1px double white;
    background-color: white;
    position: fixed;
    top: 0.3rem;
    left: 0.3rem;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.55rem;
    z-index: 999;
  }
  .container {
    width: 100%;
    .detail-swiper {
      width: 100%;
      height: 7rem;
      overflow: hidden;
    }
    .detail-title {
      width: 100%;
      height: 2rem;
      font-size: 0.26rem;
    }
    .detail-shop {
      width: 100%;
    }
  }
}
.addcart {
  width: 100%;
  height: 0.8rem;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px -1px 6px -3px black;
  .addcart-icon {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.32rem;

    li {
      width: 33%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }
  .addcart-add {
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.32rem;
    li {
      width: 50%;
      color: black;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    .add {
      background-color: brown;
      color: white;
      border: 1px solid white;
    }
  }
}
.detail-xxk {
  width: 100%;
  height: 0.8rem;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    li {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.32rem;
      position: relative;
      p {
        width: 100%;
        height: 2px;
        background-color: red;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}
.detail-pj {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pj-img {
    width: 30%;
    height: 100%;
    text-align: center;
    img {
      width: 50%;
      height: 50%;
      text-align: center;

      vertical-align: middle;
    }
  }
  .pj-uu {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 0.24rem;
    color: #cccccc;
    justify-content: space-between;
  }
}
.detail-content {
  width: 100% !important;
  font-size: 0.3rem;
  padding-top: 0.2rem;
  /deep/ ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    li {
      height: 0.6rem;
      line-height: 0.6rem;
      text-indent: 0.2rem;
    }
  }
  /deep/p {
    width: 100% !important;
    img {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
.specification {
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.6);
  position: fixed;
  top: 0;
  left: 0;
  .specification-goods {
    width: 100%;
    height: 1.4rem;
    background-color: white;
    display: flex;
    padding: 0.2rem;
    justify-content: space-between;
    .specification-img {
      width: 1rem;
      height: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .specification-title {
      width: 80%rem;
      height: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.24rem;
    }
  }
  .specification-type {
    width: 100%;
    height: 2rem;
    background-color: white;
    font-size: 0.26rem;
  }
  .specification-num {
    width: 100%;
    height: 1.5rem;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem;
    font-size: 0.28rem;
    .specification-count {
      span {
        display: block;
        float: left;
        margin: 0.01rem;
        border: 1px solid #cccccc;
        width: 0.8rem;
        height: 0.8rem;
        background: #f6f6f6;
        line-height: 0.8rem;
        text-align: center;
        font-size: 0.4rem;
      }
    }
  }
  .specification-add {
    width: 100%;
    height: 0.8rem;
    background-color: rgb(167, 0, 0);
    text-align: center;
    font-size: 0.3rem;
    color: white;
    line-height: 0.8rem;
  }
}
.specification-contont {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

/deep/.value{
  width: 200px;
  height: 25px;
  overflow: hidden;
}
</style>
